<template>
  <div class="buyhouse">
    <header>
      <span class="logo">
        <img src="../img/2.gif" alt />
      </span>
      <span>买 房</span>
      <span class="return" @click="back()">&lt;</span>
    </header>
    <main>
      <!-- 搜索 -->
      <div class="check">
        <select v-model="buySelect">
          <option v-for="(item,index) in buyRegion" :key="index">{{item}}</option>
        </select>
        <div class="input">
          <input type="text" placeholder="请在这里输入区域/商圈" v-model="value"  @input="search(value)"/>
          <span>
            <van-icon name="search" />
          </span>
        </div>
        <span>地图找房</span>
      </div>

      <!-- 标签页 -->
      <div class="label">
        <dl v-for="(item,index) in labelList" :key="index">
          <dt>
            <van-icon :name="item.url" />
          </dt>
          <dd>{{item.name}}</dd>
        </dl>
      </div>

      <!-- 筛选页 -->
      <div class="screening">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value2" :options="option2" />
          <van-dropdown-item v-model="value2" :options="option2"/>
          <van-dropdown-item v-model="value3" :options="option3"  @change="screening3(value3)"/>
          <van-dropdown-item v-model="value4" :options="option4"  @change="screening4(value4)"/>
        </van-dropdown-menu>
      </div>

      <!-- 买房数据 -->
      <div class="house">
        <dl v-for="(item,index) in buyHouse" :key="index" @click="houseDetail(item.id)">
          <dt>
            <img :src="item.url" alt />
          </dt>
          <dd>
            <p class="head">{{item.tit}}</p>
            <p>{{item.word}}</p>
            <p>
              <span class="sum">{{item.sum}}万</span>&nbsp;
              <span class="price">{{item.price}}元 / m</span>
            </p>
            <p>
              <button>{{item.type}}</button>
            </p>
          </dd>
        </dl>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import { log } from "util";
export default {
  name: "buyHouse",
  data() {
    return {
      value:'',
      buyRegion: ["北京", "上海", "深圳", "广东"],
      buySelect: "北京",
      labelList: [
        {
          name: "找商铺",
          url: "shop-o"
        },
        {
          name: "找写字楼",
          url: "hotel-o"
        },
        {
          name: "找小区",
          url: "wap-home-o"
        }
      ],
      screeningList: [
        {
          name: "区域"
        },
        {
          name: "价格"
        },
        {
          name: "户型"
        },
        {
          name: "筛选"
        }
      ],
      buyHouse: [],

      //筛选数据
      value2: '价格',
      option2: [
        { text: "价格", value: "价格" },
        { text: "< 10万", value: "10万" },
        { text: "20万-30万", value: "20万-30万" },
        { text: "30万-50万", value: "30万-50万" },
        { text: "50万-100万", value: "50万-100万" },
        { text: "< 100万", value: "< 100万" }
      ],
      value3: "户型",
      option3: [
         { text: "户型", value: "户型" },
        { text: "公寓", value: "公寓" },
        { text: "别墅", value: "别墅" },
        { text: "二手房", value: "二手房" }
      ],
      value4: "朝向",
      option4: [
         { text: "朝向", value: "朝向" },
        { text: "东", value: "东" },
        { text: "西", value: "西" },
        { text: "南", value: "南" },
        { text: "北", value: "北" }
      ],
    };
  },
  created() {
    //调用函数
    this.buyHouseList();
  },
  methods: {
    //点击返回上一级
    back() {
      this.$router.push(`/`);
    },

    //渲染购房列表
    buyHouseList() {
      axios({
        url: "/api/buyHouse"
      }).then(res => {
        console.log(res);

        if (res.data.code === 1) {
          this.buyHouse = res.data.data;
        } else {
          this.$router.push(`/login`);
        }
      });
    },

    //进入详情页
    houseDetail(id) {
      this.$router.push(`/Detail/${id}`);
    },

    //筛选户型数据
    screening3(value) {
      axios({
        url: "/api/screening3",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        if (res.data.code === 1) {
          //调用函数
          this.buyHouseList();
        } else {
          this.buyHouse = res.data.data;
        }
      });
    },
    //筛选朝向数据
    screening4(value) {
      axios({
        url: "/api/screening4",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        if (res.data.code === 1) {
          //调用函数
          this.buyHouseList();
        } else {
          this.buyHouse = res.data.data;
        }
      });
    },

    //搜索数据
    search(value) {
      axios({
        url:'/api/buyCheck',
        method:'post',
        data:{
          value:value
        }
      }).then(res => {
        console.log(res);
        
        this.buyHouse = res.data.data;
      })
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

body,
html,
.buyhouse {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.buyhouse header {
  width: 100%;
  height: 60px;
  background-color: #2997fb;
  /* display: flex;
    align-items: center;
    justify-content: space-around; */
  text-align: center;
  line-height: 60px;
}

.buyhouse header span {
  color: white;
  float: right;
  margin-right: 80px;
}

.buyhouse header .logo {
  float: right;
  margin-top: 8px;
  margin-right: 10px;
}

.buyhouse header .return {
  float: left;
  margin-left: 30px;
}

.buyhouse main {
  flex: 1;
  overflow-y: auto;
}

.buyhouse main .check {
  width: 100%;
  height: 30px;
  display: flex;
  line-height: 30px;
  margin-top: 15px;
}

.buyhouse main .check select {
  border: none;
  margin-left: 10px;
  background-color: white;
  outline: none;
}

.buyhouse main .check .input {
  margin-left: 20px;
  border: 1px solid #ccc;
  background-color: #f2f2f2;
  width: 210px;
  height: 30px;
  display: flex;
}

.buyhouse main .check .input span {
  margin-top: 2px;
}

.buyhouse main .check .input input {
  flex: 1;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
  font-size: 12px;
}

.buyhouse main .check > span {
  margin-left: 15px;
}

.buyhouse main .label {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid black;
}

.buyhouse main .label dl {
  float: left;
  width: 33%;
  height: 80px;
  text-align: center;
  margin-top: 20px;
  line-height: 24px;
}

.buyhouse main .label dl dt i {
  font-size: 36px;
}

.buyhouse main .screening {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid black;
}

.buyhouse main .screening .van-dropdown-menu {
  width: 100%;
  height: 100%;
}


.buyhouse main .house dl {
  float: left;
  width: 100%;
  height: 100px;
  /* border-bottom: 1px solid #ccc; */
  display: flex;
  margin-top: 10px;
}

.buyhouse main .house dl dt {
  margin-left: 10px;
  width: 32%;
  height: 100%;
}

.buyhouse main .house dl img {
  width: 100%;
  height: 100%;
}

.buyhouse main .house dl dd p {
  font-size: 12px;
  padding: 4px 0;
  margin-left: 8px;
}

.buyhouse main .house dl dd .head {
  font-weight: bold;
  font-size: 13px;
}

.buyhouse main .house dl dd .sum {
  color: #ff9900;
  font-weight: bold;
}

.buyhouse main .house dl dd .price {
  color: #b3b3b3;
}

.buyhouse main .house dl dd button {
  width: 55px;
  height: 22px;
  border: none;
  background-color: #eef0ef;
}
</style>